<style lang='less'>
.my-modal-parent {
  position: fixed;  // 浮动
  z-index: 999999;
}
.bench_search {
  margin-top: 10px;
}
</style>

<template>
    <div>
        <Row>
        <Col span="24">
            <Form ref="typeinfo" :model="typeinfo">
                <FormItem>
                    <Row>
                        <Col span="6" offset="1">
                            <span style="text-al">流程类型名称：</span>
                            <Input type="text" v-model="group_name" placeholder="输入流程环节名称" style="width: 60%;" ></Input>
                        </Col>
                        <Col span="2" offset="13">
                            <Button @click="selectType(1)" type="info">查询</Button>
                        </Col>
                        <Col span="2">
                            <Button @click="clickAdd" type="success">添加</Button>
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        </Col>
        </Row>
        <Row>
        <Table border :columns="columns" :data="groupData"></Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <div style="float: right;margin-top: 10px">
            <Page :total="pageData.totalRecord" show-sizer show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
        </div>
        </Row>
        <row>
          <Modal v-model="modalInfo.show" :title="modalInfo.title"
          @on-ok="save"
          @on-cancel="cancel1"
                class="my-modal-parent" width="700">
          <Form label-position="right">
            <Row class="bench_search">
              <Col span="7" class="ivu-form-item-label">流程组标识：</Col>
              <Col span="12" class="ivu-form-item-content">
                <Input type="text" :disabled="isEidct" v-model="modalInfo.group_id" placeholder="请流程组标识"/>
              </Col>
            </Row>
            <Row class="bench_search">
              <Col span="7" class="ivu-form-item-label">流程组名称：</Col>
              <Col span="12" class="ivu-form-item-content">
                <Input type="text" :disabled="isEidct" v-model="modalInfo.group_name" placeholder="请输入流程组名称"/>
              </Col>
            </Row>
            <Row class="bench_search">
              <Col span="7" class="ivu-form-item-label">流程环节标识：</Col>
              <Col span="12" class="ivu-form-item-content">
                <Select v-model="modalInfo.info_key" style="width:200px" :disabled="modalInfo.info_key">
                  <Option v-for="item in typeDataAll" :value="item.info_key" :key="item.info_key">{{ item.info_name }}</Option>
                </Select>
              </Col>
            </Row>
            <Row class="bench_search">
              <Col span="7" class="ivu-form-item-label">是否监察：</Col>
              <Col span="12" class="ivu-form-item-content">
                <RadioGroup v-model="modalInfo.monitoring_point" type="button">
                  <Radio label="是"></Radio>
                  <Radio label="否"></Radio>
              </RadioGroup>
              </Col>
            </Row>
            <Row class="bench_search">
              <Col span="7" class="ivu-form-item-label">设置计时:</Col>
              <Col span="7" class="ivu-form-item-content">
                <Input v-model="modalInfo.timing" placeholder="请设置计时"/>
              </Col>
              <Col span="5" class="ivu-form-item-content">
                小时
              </Col>
            </Row>
             <Row class="bench_search">
              <Col span="7" class="ivu-form-item-label">角色id:</Col>
              <Col span="12" class="ivu-form-item-content">
                <Input type="textarea" v-model="modalInfo.role_id" placeholder="请输入角色id"/>
              </Col>
            </Row>
             <Row class="bench_search">
              <Col span="7" class="ivu-form-item-label">动作：</Col>
              <Col span="12" class="ivu-form-item-content">
                <Input type="textarea" v-model="modalInfo.action" placeholder="请输入动作"/>
              </Col>
            </Row>
            </Form>
            <!-- <div slot="footer">
              <Button type="success" @click="save">确定</Button>
              <Button type="error" @click="cancel1">关闭</Button>
            </div> -->
          </Modal>
          <Modal v-model="cannotsee.show" @on-ok="savecannotsee">
              <p slot="header">
                  <span>该流程对其不可见</span>
              </p>
              <div style="text-align:center">
                  <Select v-model="cannotsee.cannot_seelist" multiple filterable transfer="" style="width: 70%;">
                    <Option :value="item.company_code" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
                  </Select>
              </div>
          </Modal>
        </row>
        <row>
            <Modal
                v-model="modal1"
                title="流程类型管理"
                width="80%"
                @on-ok="cancel"
                @on-cancel="cancel">
                <Form ref="savetypeinfo" :model="savetypeinfo">
                    <FormItem>
                        <Button type="success" @click="editRow({}, '1', '流程组设置')" style="margin-bottom:10px">添加</Button>
                        <Table  border :columns="columnsPerson"
                              :data="groupAllData" size="small">
                          <template slot="action" slot-scope="{ row }">
                            <Button type="info" style="margin-Right: 5px" size="small" @click="editRow(row, '2', '流程组设置')">编辑</Button>
                            <Button type="error" size="small" @click="deleteRow(row)">删除</Button>
                          </template>
                        </Table>
                    </FormItem>
                </Form>
            </Modal>
          <Modal v-model="modal3" title="复制流程信息" width="600" @on-cancel="modal3===false">
            <Form label-position="right" :label-width="100">
              <Row class="mb20">
                <Col span="8" class="ivu-form-item-label">流程组标识：</Col>
                <Col span="9" class="ivu-form-item-content" style="width: 288px; ">
                  <Input v-model="formDate.newGroupId" type="text" placeholder=""/>
                </Col>
              </Row>

              <Row class="mb20">
                <Col span="8" class="ivu-form-item-label">流程组名称：</Col>
                <Col span="9" class="ivu-form-item-content" style="width: 288px; ">
                  <Input v-model="formDate.group_name" type="text" placeholder=""/>
                </Col>
              </Row>
            </Form>
            <div slot="footer">
              <Button type="info" @click="copySaveForm()">确定</Button>
              <Button @click="modal3=false">关闭</Button>
            </div>
          </Modal>
        </row>
    </div>
</template>

<script>
import { insertProcess, copyProcess, deleteProcess, findProcessPageList, findGroupProcessList, findProcessInfoAllList, updateProcess, getMailLevelList, saveProcessCannotSee } from '@/api/eventlist'
export default {
  name: 'process',
  components: {
  },
  data () {
    return {
      loadData: true,
      pageData: {
        totalRecord: 0,
        pageSize: 10,
        pageNo: 1
      },
      typeinfo: {},
      savetypeinfo: {},
      formDate: {},
      cannotsee: { show: false, cannot_seelist: [] },
      mailList: [[], [], []],
      group_name: '',
      info_key: '',
      monitoring_point: false,
      isEidct: false,
      isEidct2: false,
      switch1: true,
      typeData: [],
      typeDataAll: [],
      groupData: [],
      groupAllData: [],
      modalInfo: { show: false },
      columnsPerson: [
        { title: '流程组标识', key: 'group_id', width: 200 },
        { title: '流程组名称', key: 'group_name', width: 200 },
        { title: '流程环节标识', key: 'process_id', width: 150 },
        { title: '流程环节名称', key: 'process_name', width: 200 },
        { title: '监察', key: 'monitoring_point', width: 100 },
        { title: '计时', key: 'timing', width: 100 },
        { title: '操作', align: 'center', width: 170, slot: 'action' }
      ],
      columns: [
        { title: '流程组标识', key: 'group_id', width: 300 },
        { title: '流程组名称', key: 'group_name' },
        { title: '操作',
          key: 'action',
          align: 'center',
          width: 250,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'success', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.formDate.oldGroupId = params.row.group_id
                    this.modal3 = true
                  }
                }
              }, '复制'),
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.findGroupProcessList(params.row)
                    this.modalInfo.group_id = params.row.group_id
                    this.modalInfo.group_name = params.row.group_name
                    this.modal1 = true
                    this.isEidct = true
                  }
                }
              }, '编辑'),
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: {},
                on: {
                  click: () => {
                    this.setcannotsee(params.row)
                  }
                }
              }, '设置社区隐藏')
            )
            return h('div', temp)
          }
        }
      ],
      modal1: false,
      modal2: false,
      modal3: false,
      delid: ''
    }
  },
  methods: {
    pageChange (ret) {
      console.log(ret)
      this.pageData.pageNo = ret
      this.getApiData()
    },
    pageSizeChange (ret) {
      this.pageData.pageSize = ret
      this.getApiData()
    },
    selectType (pageNo) {
      this.pageData.pageNo = pageNo
      this.getApiData()
    },
    cancel () {
      this.savetypeinfo = {}
      this.getApiData()
    },
    cancel1 () {
      this.modalInfo.show = false
      this.modal1 = true
    },
    change (status) {
      this.monitoring_point = status
    },
    editRow (row, type, title) {
      if (!this.modalInfo.group_id) {
        this.modalInfo.group_id = row.group_id
      }
      if (!this.modalInfo.group_name) {
        this.modalInfo.group_name = row.group_name
      }
      if (!this.modalInfo.monitoring_point) {
        this.modalInfo.monitoring_point = row.monitoring_point
      } else {
        this.modalInfo.monitoring_point = true
      }
      this.modalInfo.title = title
      this.modalInfo.type = type
      this.modalInfo.process_id = row.process_id
      this.modalInfo.role_id = row.role_id
      this.modalInfo.action = row.action
      this.modalInfo.info_key = row.process_id
      this.modalInfo.process_name = row.process_name
      this.modalInfo.timing = row.timing
      this.modalInfo.show = true
      this.modal1 = false
      this.isEidct2 = type !== '1'
    },
    showmodal1 (params) {
      this.savetypeinfo.id = params.id
      this.modal1 = true
    },
    showmodal2 (params) {
      this.delid = params.id
      this.modal2 = true
    },
    cancel2 () {
      this.delid = ''
    },
    deleteRow (paramsin) {
      let params = {
        group_id: paramsin.group_id,
        process_id: paramsin.process_id
      }
      deleteProcess(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功' })
          this.findGroupProcessList(this.modalInfo)
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
      this.delid = ''
    },
    // 社区统计下拉搜索框的级联查询
    getMailAllList (index) {
      getMailLevelList({ level: index + 2 }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[(index) + 'all'] = res.data.data
          this.mailList[index] = this.mailList[index + 'all']
          this.searchInfo['level' + (index + 1)] = 0
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    setcannotsee (row) {
      console.log(row, 'aaaaaaaa')
      if (row.cannot_see) {
        let cannot_seelist = row.cannot_see.substr(0, row.cannot_see.length - 1)
        this.cannotsee.cannot_seelist = cannot_seelist.split(',')
      } else {
        this.cannotsee.cannot_seelist = []
      }
      this.cannotsee.group_id = row.group_id
      this.cannotsee.show = true
    },
    savecannotsee (row) {
      let cannot_see = ''
      this.cannotsee.cannot_seelist.forEach(element => {
        cannot_see += element + ','
      })
      let params = {
        group_id: this.cannotsee.group_id,
        cannot_see: cannot_see
      }
      saveProcessCannotSee(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功' })
          this.getApiData()
          this.findProcessInfoAllList()
          this.cannotsee.show = false
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
    },
    save () {
      let processname = ''
      this.typeDataAll.forEach(item => {
        if (item.info_key === this.modalInfo.info_key) {
          processname = item.info_name
        }
      })
      console.log(this.modalInfo.monitoring_point === '是')
      let monitoring_point = this.modalInfo.monitoring_point === '是' ? '1' : '0'
      let params = {
        group_id: this.modalInfo.group_id,
        group_name: this.modalInfo.group_name,
        role_id: this.modalInfo.role_id,
        action: this.modalInfo.action,
        process_id: this.modalInfo.info_key,
        process_name: processname,
        monitoring_point: monitoring_point,
        timing: this.modalInfo.timing
      }
      let url = ''
      if (this.isEidct2) {
        url = updateProcess
      } else {
        url = insertProcess
      }
      this.isEidct2 = false
      url(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功' })
          this.findGroupProcessList(this.modalInfo)
          this.modalInfo = {
            group_id: params.group_id,
            group_name: params.group_name
          }
          this.modal1 = true
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
    },
    getApiData () {
      let params = {
        pageSize: this.pageData.pageSize,
        pageNo: this.pageData.pageNo,
        group_name: this.group_name,
        info_key: this.info_key
      }
      findProcessPageList(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.groupData = ret.data.data.results
          this.loadData = false
          this.pageData = {
            totalRecord: ret.data.data.totalRecord,
            pageSize: ret.data.data.pageSize,
            pageNo: 1
          }
        } else {
          this.loadData = true
          this.$Notice.error({ title: '查询列表失败', desc: ret.data.errmsg })
        }
      })
    },
    findGroupProcessList (params) {
      findGroupProcessList(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.groupAllData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询类型列表失败', desc: ret.data.errmsg })
        }
      })
    },
    findProcessInfoAllList () {
      findProcessInfoAllList().then(ret => {
        if (ret.data.errcode === 0) {
          this.typeData = ret.data.data
          this.typeDataAll = ret.data.data
          // this.typeDataAll.splice(0, 0, { 'info_key': '', 'info_name': '全部' })
        } else {
          this.$Notice.error({ title: '查询类型列表失败', desc: ret.data.errmsg })
        }
      })
    },
    clickAdd () {
      this.modal1 = true
      this.isEidct = false
      this.groupAllData = []
      this.modalInfo = { show: false }
    },
    copySaveForm () {
      if (this.formDate.newGroupId === '' || this.formDate.newGroupId === undefined) {
        this.$Notice.error({ title: '请填写流程标识', desc: '' })
        return false
      }
      if (this.formDate.group_name === '' || this.formDate.group_name === undefined) {
        this.$Notice.error({ title: '请填写流程名称', desc: '' })
        return false
      }

      let param = {
        old_group_id: this.formDate.oldGroupId,
        new_group_id: this.formDate.newGroupId,
        group_name: this.formDate.group_name
      }

      copyProcess(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '复制成功' })
          this.formDate = {}
          this.getApiData()
          this.modal3 = false
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
    },
    updateProcess () {
      let processname = ''
      this.typeDataAll.forEach(item => {
        if (item.info_key === this.modalInfo.info_key) {
          processname = item.info_name
        }
      })
      let monitoring_point = this.modalInfo.monitoring_point === '是' ? '1' : '0'
      let params = {
        group_id: this.modalInfo.group_id,
        group_name: this.modalInfo.group_name,
        process_id: this.modalInfo.info_key,
        process_name: processname,
        monitoring_point: monitoring_point,
        timing: timing
      }
      updateProcess(params).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功' })
          this.findGroupProcessList(this.modalInfo)
          this.modalInfo = {
            group_id: params.group_id,
            group_name: params.group_name
          }
          this.modal1 = true
        } else {
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.getApiData()
    this.findProcessInfoAllList()
    this.getMailAllList(2)
  }
}
</script>

<style>

</style>
